<template>
  <div class="toast">
    <span v-show="show">{{ msg }}</span>
  </div>
</template>
<script>
export default {
  name: 'Toast',
  data() {
    return {
      msg: '',
      show: false
    }
  },
  methods: {
    showToast(msg, delay) {
      this.msg = msg
      this.show = true
      setTimeout(() => {
        this.msg = ''
        this.show = false
      }, delay || 3000)
    }
  }
}
</script>
<style lang="less">
.toast{
    position: fixed;
    top: 50%;
    text-align: center;
    width: 100%;
    z-index: 9999;
    span{
        margin: 0 auto;
        padding: 10px;
        background-color: #000000;
        font-size: 16px;
        color: #ffffff;
        border-radius: 10px;
        opacity: 0.9;
    }
}
</style>
